<template>
  <div class="cinema">
    <div class="rowTop">
      <Location></Location>
      <div class="search" @click=" gosearch ">
        <van-search placeholder="搜影院" v-model="value"></van-search>
      </div>
    </div>
    <cinema-list :cinemas="cinemas" />
  </div>
</template>
<script>
import Location from '../../components/Location'
import CinemaList from '../../components/CinemaList'
export default {
  data: () => ({
    value: '',
    cinemas: [],
    paging: {},
    hasMore: ''
  }),
  created () {
    this.$store.state.title = '影院'
    this.getcinemas()
    this.$store.state.bottomFlag = true
    this.$store.state.topFlag = true
    this.$store.dispatch('changeActive', this.$route.path)
  },
  methods: {
    gosearch () {
      this.$router.push('/search?searchtype=cinema')
    },
    async getcinemas () {
      let that = this
      const data = await this.$http.get(`ajax/cinemaList?cityId=${this.$store.state.cityId}`)
      this.cinemas = data.data.cinemas
      this.paging = data.data.paging
      this.hasMore = data.data.paging.hasMore
      console.log(this.paging.limit)
      document.addEventListener(
        'scroll',
        this.fangdou(function () {
          that.getMoreInfo(that.paging.offset, that.paging.limit)
        }, 500)
      )
    },
    // 更多热映电影防抖
    fangdou (callback, delay) {
      // 定时器
      var timer
      return function () {
        if (timer) {
          // 引用外部函数的timer
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          callback.apply(this, arguments)
        }, delay)
      }
    },
    getMoreInfo (offset, limit) {
      var that = this
      // 获得滚动条距离顶部距离
      var scrollTop = document.documentElement.scrollTop
      // 获取页面高度
      var pageHeight = document.documentElement.scrollHeight
      // 获取视口高度
      var windowHeight = window.innerHeight
      console.log(scrollTop, pageHeight, windowHeight)
      if (scrollTop + pageHeight === windowHeight && this.hasMore === true) {
        this.hasMore = false
      }
      // let arrindex = 12 // 起始数
      // let limit = 12 // 显示个数
      // let tosee = that.movieIds.splice(arrindex, limit)
      // tosee = tosee.join(',')
      that.$http
        .get(`/ajax/cinemaList?offset=${offset}&limit=${limit}&cityId=${this.$store.state.cityId}`
        )
        .then(res => {
          that.paging = res.data.paging
          if (res.data.paging.hasMore !== false) {
            that.cinemas = that.cinemas.concat(res.data.cinemas)
          } else {
            return false
          }
        })
    }
  },
  components: {
    CinemaList,
    Location
  }
}
</script>
<style lang="less" scoped>
.rowTop {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .search {
    flex: 3;
  }
}
</style>
